<template>
  <el-menu class="navbar"
           :default-active="activeIndex"
           mode="horizontal">
    <el-menu-item style="font-size:18px;font-weight: 700;">惠经表白墙</el-menu-item>
    <el-menu-item style="float:right;margin-right:5%">
      <div class="box"
           @click="hanldOpenDrawer">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </el-menu-item>

    <el-drawer :title="username"
               size="50%"
               :visible.sync="drawer">
      <el-row class="info">
        <el-col :span="24">
          <span class="userInfo"
                @click="handleInfo">个人信息</span>
        </el-col>
      </el-row>
      <el-row class="info">
        <el-col :span="24">
          <span class="logout"
                @click="hanldLogout">退出登录</span>
        </el-col>
      </el-row>
    </el-drawer>
  </el-menu>
</template>

<script>
import jwt_decode from "jwt-decode";
export default {
  name: "navbar",
  data () {
    return {
      activeIndex: '1',
      username: "未登录",
      drawer: false,
      identity: ""
    }
  },
  methods: {
    handleInfo () {
      if (localStorage.getItem("userToken")) {
        this.$router.push({
          path: `/userInfo`
        });
      } else {
        this.$router.push("/login");
      }
    },
    hanldOpenDrawer () {
      this.drawer = true;
    },
    hanldLogout () {
      if (localStorage.getItem("userToken")) {
        localStorage.removeItem("userToken");
        this.$router.go(0);
      } else {
        this.$message({
          message: '你还未登录哦',
          type: 'error'
        });
      }
    }
  },
  mounted () {
    if (localStorage.getItem("userToken")) {
      this.username = jwt_decode(localStorage.getItem("userToken")).name
    }
  }
}
</script>

<style scoped>
.navbar {
  width: 100%;
}
.box {
  width: 20px;
  height: 20px;
  margin-top: 20px;
}
.line {
  width: 100%;
  height: 1px;
  background: #000;
}
.line:nth-child(2) {
  margin: 8px 0;
}
.box:hover {
  transform: rotate(360deg);
  transition: all 0.5s;
}
.userInfo,
.logout {
  display: block;
  padding: 10% 5%;
}
.info {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.info:hover {
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}
</style>